<template>
  <div>
    <a-card direction="vertical" :size="12" fill :title="`成品酒管理`">
      <a-table
        :columns="columns"
        :data="wineData"
        size="large"
        :pagination="pagination"
        @page-change="handlePageChange"
        :bordered="{ wrapper: true, cell: true }"
      >
        <!-- 规格 -->
        <template #guige="{ record }">
          <span>{{ getGuige(record) }}</span>
        </template>
        <!-- 多少箱 -->
        <template #box="{ record }">
          <span>{{ getBox(record) }}</span>
        </template>
        <!-- 操作 -->
        <template #action="{ record }">
          <a-button type="text" @click="openOutbound(record)">出库</a-button>
          <a-button type="text" @click="getStoreInfo(record)">入库记录</a-button>
        </template>
      </a-table>
    </a-card>
    <OutDetial ref="outDetial" class="m-t-10" />
    <StoreInfoDialog ref="storeInfoDialog" :getGuige="getGuige" />
    <Outbound ref="outbound" :againGetOutLits="againGetOutLits" />
  </div>
</template>

<script lang="ts" setup>
import SaveAddressDialog from './components/saveAddressDialog.vue';
import { getWineData } from '@/api/storeroom';
import { ref } from 'vue';
import StoreInfoDialog from './components/storeInfoDialog.vue';
import Outbound from './components/outbound.vue';
import OutDetial from './components/outDetial.vue';
const wineData = ref([]);
const storeInfoDialog = ref(null)
const outbound = ref(null)
const outDetial = ref(null)
const openOutbound = (record) => {
  outbound.value.openDialog(record);
}
const getWineInfo = async () => {
  const { data, code } = await getWineData();
  if (code === 200) {
    wineData.value = data;
  }
};
const getStoreInfo = (record) => {
  storeInfoDialog.value.openDialog(record);
}
// 获取多少箱
const getBox = (record) => {
  return (record.total / record.wine_case).toFixed(1);
};
// 获取规格的名称
const getGuige = (record) => {
  return `${record.wine_alcohol}%vol/${record.wine_case}瓶/箱`;
};
// 重新获取出库详情列表
const againGetOutLits = () => {
  outDetial.value.getOutList()
}
const columns = ref([
  {
    title: '#',
    dataIndex: 'wine_id',
    width: 80,
    align: 'center',
  },
  {
    title: '酒类',
    dataIndex: 'wine_name',
    align: 'center',
  },
  {
    title: '规格',
    dataIndex: 'guige',
    slotName: 'guige',
    align: 'center',
  },
  {
    title: '库存/瓶',
    dataIndex: 'total',
    align: 'center',
  },
  {
    title: '库存/箱',
    slotName: 'box',
    align: 'center',
  },
  {
    title: '操作',
    slotName: 'action',
    align: 'center',
    width: 300,
  },
]);

getWineInfo();
</script>

<style lang="scss" scoped>
</style>